<template>
  <div class="zw-order">
    <div>
      <custNavbar title="确认订单" uname="" paths=""></custNavbar>
    </div>
  </div>
  <div class="zw-order1">
    <br />
    <div class="zw-card">
      <dl>
        <dt><img class="zw-img" :src="obj.image" alt="" /></dt>
        <dd>
          <span style="font-size: 15px; font-weight: bold">{{ obj.title }}</span
          ><br />
          <span style="font-size: 15px; font-weight: bold; color: red">{{
            obj.price ? "￥" + (obj.price * obj.discount).toFixed(2) : "免费"
          }}</span>
        </dd>
      </dl>
    </div>
    <div class="zw-coupon">
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <div class="zw-price">
      <div class="zw-pr">
        <span class="zw-l">总计</span>
        <span class="zw-r">{{ totalPrice }}</span>
      </div>
      <div class="zw-pr">
        <span class="zw-l">优惠卷</span>
        <span class="zw-r">{{ discount }}</span>
      </div>
      <div class="zw-pr">
        <span class="zw-l">实付</span>
        <span class="zw-r" style="font-size: 20px; font-weight: bold"
          >￥{{ actualPrice }}</span
        >
      </div>
    </div>
    <div class="zw-paypal">
      <br />
      <span>支付方式</span>
      <div class="zw-plpy" ref="paypalContainer"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import custNavbar from "@/components/custNavbar/index.vue";
import { orderAdd } from "@/api/index.js";
const obj = ref(JSON.parse(localStorage.getItem("listObj")) || {});
const loaded = ref(false);
const paidFor = ref(false);
const paypalContainer = ref(null);
const product = {
  price: "actualPrice",
};

const orderid = ref("");
const orderprice = ref("");

const setLoaded = () => {
  loaded.value = true;
  window.paypal
    .Buttons({
      style: {
        layout: "vertical",
        color: "gold",
        shape: "pill",
        label: "checkout",
        tagline: false,
      },
      locale: "zh_CN",

      createOrder: (data, actions) => {
        return actions.order.create({
          purchase_units: [
            {
              description: product.description,
              amount: {
                currency_code: "USD",
                value: actualPrice.value,
              },
            },
          ],
        });
      },
      onApprove: (data, actions) => {
        return actions.order.capture().then((details) => {
          orderid.value = details.id;
          orderprice.value = details.purchase_units[0].amount.value;
          paidFor.value = true;
          orderAdd({
            title: obj.value.title,
            image: obj.value.image,
            price: obj.value.price,
            orderprice: orderprice.value,
            create_time:details.create_time,
            discount:coupons.value[chosenCoupon.value].value / 100
          });
        });
      },
      //取消支付
      onCancel: function (data) {
        
      },
      //点击支付
      onClick: function (data) {},
    })
    .render(paypalContainer.value);
};

onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://www.paypal.com/sdk/js?client-id=ARkRAyY3JXRfNT0BTpw4_0FW8JeOpltHYz6yhP8vh2phGHlEpL3MYn3yhUEkrWmqXNWq5RZTSrzjiBij";

  script.addEventListener("load", setLoaded);
  document.body.appendChild(script);
});
const coupon = {
  available: 1,
  condition: "赠送新注册用户",
  reason: "",
  value: 1000,
  name: "10元专享立减劵",
  startAt: 1711904000,
  endAt: 1713592000,
  valueDesc: "10",
  unitDesc: "元",
};
const coupon1 = {
  available: 1,
  condition: "赠送新注册用户",
  reason: "",
  value: 500,
  name: "优惠券名称",
  startAt: 1711904000,
  endAt: 1715692000,
  valueDesc: "5",
  unitDesc: "元",
};
const coupons = ref([coupon, coupon1]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
  showList.value = false;
  chosenCoupon.value = index;
};
const onExchange = (code) => {
  coupons.value.push(coupon);
};
const totalPrice = computed(() => {
  return obj.value.price * obj.value.discount;
  
});

const discount = computed(() => {
  if (chosenCoupon.value !== -1) {
    return coupons.value[chosenCoupon.value].value / 100;
  } else {
    return 0;
  }
});
const actualPrice = computed(() => {
  return totalPrice.value - discount.value;
});
</script>
.value
<style lang="scss" scoped>
.zw-order1 {
  background-color: #efefef;
  width: 100%;
  height: 93.3vh;
  dl {
    background-color: white;
    width: 85%;
    margin: auto;
    display: flex;
    border-radius: 7px;
    padding: 10px 10px;
    dt {
      .zw-img {
        width: 130px;
        height: 80px;
        background-color: rgb(102, 110, 232);
        border-radius: 7px;
      }
    }
    dd {
      margin: 0px 10px;
    }
  }
  .zw-coupon {
    .van-cell {
      width: 90%;
      margin: auto;
      border-radius: 7px;
      margin: 10px 20px;
      height: 45px;
    }
  }
  .zw-price {
    width: 90%;
    margin: auto;
    border-radius: 7px;
    background-color: white;
    font-size: 14px;
    height: 90px;
    .zw-pr {
      padding: 5px 15px;
    }
    .zw-r {
      float: right;
    }
  }
  .zw-paypal {
    width: 90%;
    margin: auto;
    border-radius: 7px;
    background-color: white;
    font-size: 14px;
    margin: 10px 20px;
    height: 200px;
    span {
      margin: 20px 20px;
    }
    .zw-plpy {
      margin: 30px;
    }
  }
}
</style>
